﻿@model MobileWebsiteGenerator.Models.MainViewModel
@{
    ViewBag.Title = "Create";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/Css/uploadify.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.uploadify.js")" type="text/javascript"></script>
<script type="text/javascript">

    //Background image


    $(window).load(
    function () {
        $("#ImageUploader").fileUpload({
            'uploader': '/Scripts/uploader.swf',
            'cancelImg': '/Images/cancel.png',
            'buttonText': 'Select Image',
            'script': '/ThemeDetail/Upload',
            'folder': '/Uploads',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': false,
            'auto': true,
            'onError': function (e, q, f, o) {
                alert(settings.script);
            },
            'onComplete': function (event, ID, fileObj, response, data) {

                $("#MyTheme_backgroundImage").attr("value", response);
            }
        });
    });
    //Header image
    $(window).load(
    function () {
        $("#HeaderUploader").fileUpload({
            'uploader': '/Scripts/uploader.swf',
            'cancelImg': '/Images/cancel.png',
            'buttonText': 'Select Image',
            'script': '/ThemeDetail/Upload',
            'folder': '/Uploads',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'multi': false,
            'auto': true,
            'onComplete': function (event, ID, fileObj, response, data) {
                $("#MyTheme_HeaderImage").attr("value", response);
            }
        });
    });
</script>
<style type="text/css">
    #AllImages
    {
        border: 1px solid #000;
        border-radius: 10px;
        background-color: White;
        height: 500px;
    }
    .ImageContainer
    {
        margin: 5px;
        float: left;
        width: auto;
        display: none;
    }
    .ImageContainer img
    {
        border: 1px solid #000;
        padding: 5px;
        background-color: #999;
        border-radius: 10px;
    }
    .ImageContainer p
    {
        text-align: center;
        margin: 2px 0px;
    }
    .ImageContainer a
    {
        padding: 5px;
        background-color: Blue;
        border: 1px solid #000;
        border-radius: 10px;
        color: White;
        text-decoration: none;
    }
    .ImageContainer a:hover
    {
        text-decoration: underline;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {

        $('#headercolorCode').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#headercolorCode").css('backgroundColor', '#' + hex);
                $("#headercolorCode").html('#' + hex);
                $("#headercolorCode").attr("value", '#' + hex);
            }
        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);
        });
    });

    $(document).ready(function () {

        $('#background_color').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#background_color").css('backgroundColor', '#' + hex);
                $("#bgcolorCode").html('#' + hex);
                $("#background_color").attr("value", '#' + hex);
            }



        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);


        });

    });

    $(document).ready(function () {

        $('#footer_color').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#footer_color").css('backgroundColor', '#' + hex);
                $("#footercolorCode").html('#' + hex);
                $("#footer_color").attr("value", '#' + hex);

            }
        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);
        });


    });
 
 
</script>
<link href="@Url.Content("~/Content/Css/colorpicker.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Content/css/colorpicker.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $('#MyTheme_Headercolor').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#MyTheme_Headercolor").css('backgroundColor', '#' + hex);
                $("#MyTheme_Headercolor").html('#' + hex);
                $("#MyTheme_Headercolor").attr("value", '#' + hex);
            }
        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);
        });
    });

    $(document).ready(function () {

        $('#MyTheme_backgroundColor').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#MyTheme_backgroundColor").css('backgroundColor', '#' + hex);
                $("#bgcolorCode").html('#' + hex);
                $("#MyTheme_backgroundColor").attr("value", '#' + hex);
            }



        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);


        });

    });

    $(document).ready(function () {

        $('#footer_color').ColorPicker({
            onSubmit: function (hsb, hex, rgb, el) {
                $(el).val(hex);
                $(el).ColorPickerHide();
            },
            onBeforeShow: function () {

                $(this).ColorPickerSetColor(this.value);
            },
            onChange: function (hsb, hex, rgb) {
                $("#footer_color").css('backgroundColor', '#' + hex);
                $("#footercolorCode").html('#' + hex);
                $("#footer_color").attr("value", '#' + hex);

            }
        })
        .bind('mosuseClick', function () {

            $(this).ColorPickerSetColor(this.value);
        });


    });
 
 
</script>
<a href="@Url.Action("EditWebsite", "AdminCustomer", MobileWebsiteGenerator.MvcApplication._MainCustomer)" style="color:Black;" id="GoToMain" title="Go to Main page">
    <img src="@Url.Content("~/images/Arrow -Left.png")" alt="Alternate Text" /></a>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    @Html.HiddenFor(model => model.MyTheme.theme_id)
    <div class="form_content">
        <form id="form1" method="post" action="">
        <div class="form_row">
            <label>
                Header Text:</label>
            <input class="form_input text-box single-line" id="MyTheme_HeaderText" name="MyTheme.HeaderText" type="text" value="@Model.MyTheme.HeaderText" />
        </div>
          <div class="form_row">
            <label>
              [Hebrew]  Header Text:</label>
            <input class="form_input text-box single-line" id="MyTheme_HHeaderText" name="MyTheme.HHeaderText" type="text" value="@Model.MyTheme.HHeaderText" />
        </div>
        <div class="form_row">
            <label>
                Header Color:</label>
            <input class="form_input text-box single-line" id="MyTheme_Headercolor" name="MyTheme.Headercolor" type="text" value="@Model.MyTheme.Headercolor" />
            <div id="footerColorCode">
            </div>
        </div>
        <div class="form_row">
            <label>
                Header Image</label>
            <input class="form_input text-box single-line" id="MyTheme_HeaderImage" name="MyTheme.HeaderImage" type="text" value="@Model.MyTheme.HeaderImage" />
            <span id="HeaderUploader"></span>
        </div>
        <div class="form_row">
            <label>
                Background Color:</label>
            <input class="form_input text-box single-line" id="MyTheme_backgroundColor" name="MyTheme.backgroundColor" type="text" value="@Model.MyTheme.backgroundColor" />
            <div id="bgcolorCode">
            </div>
        </div>
        <div class="form_row">
            <label>
                Background Image</label>
            <input class="form_input text-box single-line" id="MyTheme_backgroundImage" name="MyTheme.backgroundImage" type="text" value="@Model.MyTheme.backgroundImage" />
            <span id="ImageUploader"></span>
        </div>
        <div class="form_row">
            <label>
                Footer Text:</label>
            <input class="form_input text-box single-line" id="MyTheme_Footertext" name="MyTheme.Footertext" type="text" value="@Model.MyTheme.Footertext" />
        </div>
        <div class="form_row">
            <label>
             [Hebrew] Footer Text:</label>
            <input class="form_input text-box single-line" id="MyTheme_HFootertext" name="MyTheme.HFootertext" type="text" value="@Model.MyTheme.HFootertext" />
        </div>
        <div class="form_row">
            <input type="submit" class="form_submit" value="Submit" style="float: left;" />
        </div>
        </form>
    </div>
        
        


    
    
    

}
